<!-- 智能开关 -->
<template>
  <div class="kaiguan">
    <!-- <div class="btns">
      <van-button class="btn" type="default" size="small" color="rgb(94,154,246)">全开</van-button>
      <van-button class="btn" type="default" size="small" color='rgb(66,224,209)'>全关</van-button>
      <van-button class="btn" type="default" size="small" color="rgb(160,160,160)" @click="timing">定时任务</van-button>
      <van-button class="btn" type="default" size="small" color="rgb(160,160,160)" @click="rename">一键改名</van-button>
    </div> -->
    <div class="list">
      <div class="item" v-for="item in list" v-bind:key="item.id" @click="godetails(item)">
        <div class="top">
          <div class="left">
            <div>{{ item.name }}</div>
            <div>编号：{{ item.sn }}</div>
            <div style="  text-align: right;">
             
              <a style="color:red;  " @click.stop="unbind(item)">解绑</a>
            </div>
          </div>

        </div>
        <!-- <div class="bottom">
        <div><van-icon name="setting-o" style="margin-right: 5px" />控制</div>
        <div><van-icon name="setting-o" style="margin-right: 5px" />设置</div>
      </div> -->
      </div>

    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from 'vant';
import { deviceList } from "../../../api/device";
import { userDeviceDel } from "../../../api/user";

export default {
  name: "",
  data() {
    return {
      checked: true,
      list: []
    };
  },
  methods: {
    // 定时任务
    godetails(val) {
      console.log("val", val);
      this.$router.push({ path: "/switch-info", query: { code: val.code } });
    },
    timing() {
      this.$router.push({ path: '/timing-switch' })
    },
    // 开关改名
    rename() {
      this.$router.push({ path: '/switch-rename' })
    },
    async getData() {



      console.log("dddd", this.$route.query);
      var areaid = this.$route.query.aid;
      let res = await deviceList({ userid: localStorage.getItem("userid"), areaid: areaid });

      if (res.status == 200) {
        this.list = res.data;
      }
    },
    async unbind(uitem) {
      Dialog.confirm({
        title: '系统提示',
        message: '确定要解绑吗？',
      })
        .then(async () => {
          let res = await userDeviceDel({ id: uitem.userdevice_id });
          if (res.status == 200) {
            this.$toast("解绑成功");
            this.getData();

          }
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    }
  },
  computed: {},
  watch: {},
  async created() {


    this.getData();

  },
  mounted() {



  },
};
</script>

<style lang="scss" scoped>
.kaiguan {
  width: 100%;
  height: 100%;
  padding: 30px 40px;

  .btns {
    margin-bottom: 20px;

    .btn {
      color: #fff;
      width: 150px;
      border-radius: 15px;
    }

    .btn~.btn {
      margin-left: 15px;
    }
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
      padding: 10px 20px;
      width: 47%;
      height: 150px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      border-radius: 25px;

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left :first-child {
          font-size: 34px;
        }

        .left :last-child {
          color: rgb(94, 94, 94);
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #acacac;
      }
    }
  }
}
</style>
